<!--
* @Description 组件传递ComponentTransmissionIndex
* @author 三咲问道
* @date 2025/6/4
-->
<template>
  <div class="ComponentTransmissionIndex">
    <div class="title">vue3中常用的组件通信方式:</div>
    <div class="item">1,props父组件向子组件通信</div>
    <div class="item">2,自定义事件 子组件向父组件进行通信</div>
    <div class="item">3,全局事件总线,可以在项目中安装mitt</div>
    <div class="item">4,provide-inject 可以实现隔辈传输</div>
    <div class="item">5,Pinia(推荐项目使用)</div>
    <div class="item">6,vuex</div>
    <div class="main-content">
      <div class="title-1">这是父组件的标题 -- {{ count }}</div>
      <el-button type="primary" @click="count++">加一</el-button>
      <el-button type="primary" plain @click="count--">减一</el-button>
      <div class="d-f">
        <SubComponent class="f-1" :count="count" @add_1="count++" @minus_1="count--" @add_2="count++" @minus_2="count--"></SubComponent>
        <SubComponent_2 class="f-1" :count="count" @add_2="count++" @minus_2="count--"></SubComponent_2>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, provide} from 'vue'
import SubComponent from './SubComponent.vue'
import SubComponent_2 from './SubComponent_2.vue'

let count = ref(0)
provide('count', count)

</script>

<style scoped lang="less">
.ComponentTransmissionIndex {
  background: #fff;
  height: calc(100vh - 108px);
  overflow: auto;
  padding: 12px;

  .title {
    font-size: 18px;
    font-weight: bold;
  }

  .item {
    font-size: 16px;
  }

  .main-content {
    margin-top: 12px;
    background: #7c9148;
    height: 400px;

    .d-f {
      display: flex;
    }

    .f-1 {
      flex: 1;
    }

    .title-1 {
      color: #fff;
      text-align: center;
      font-size: 22px;
    }

  }
}
</style>